<template>
    <div class="talk">
        <button @click="getlovetalk">获取对话</button>
        <ul>
            <li v-for="value in talk" :key="value.id">{{ value.title }}</li>
        </ul>
    </div>  
</template>

<script setup lang="ts" name="LoveTalk">
import axios from 'axios'
import { reactive } from 'vue'
import { nanoid } from 'nanoid'
let talk = reactive([
    {id: "1", title: 'hello one'},
    {id: '2', title: 'hello two'},
    {id: '3', title: 'hello three'}
])

async function getlovetalk() {
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id: nanoid(), title}
    talk.push(obj)
}
</script>

<style scoped>
    .talk {
        background-color: pink;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>